<template>

  <view class="couponGivetoConfirm">
    <view class="give_box">
      <view class="txt">您将要转赠:</view>
      <view class="money">￥{{ payInfo.money }}</view>
      <view class="txt_bold">共<text>{{ payInfo.num }}</text>张券</view>
    </view>

    <view class="giveInfo">
      <view class="title">请填写转赠信息:</view>
      <input class="phone" type="number" bindinput="inputPhone" :focus="focusPhone" placeholder="手机号">
      <view class="memo-box">
        <textarea class="memo" value="" bindinput="inputMemo" :maxlength="noteMaxLen" placeholder="请填写赠与寄语" />
        <text class="memo-tip"><text :style="'color: '+currentNoteLen>=noteMaxLen ? '#f9be52' : ''+';'">{{ currentNoteLen|0 }}</text>/{{ noteMaxLen }}个字</text>
      </view>
    </view>

    <button class="page-body-button" bindtap="givenConfirm">确认转赠</button>
    <view class="instruction">
      <view class="explain">转赠说明</view>
      <view><text>转赠是将您账户中多领到的券赠送给您的亲朋好友，只需要他是我们超市的会员，填写手机号就可以将券免费赠送给他。</text></view>
    </view>
  </view>
</template>

<script>
import { couponGiven } from '@/api/api1'
const util = require('@/utils/util')
export default {
  components: {},
  data() {
    return {
      receiverPhone: '',
      focusPhone: false,
      memo: '',
      focusMemo: false,
      currentNoteLen: 0,
      noteMaxLen: 40
    }
  },

  computed: {
    userInfo() {
      return this.$store.getters.userInfo
    },
    hasLogin() {
      return this.$store.getters.hasLogin
    },
    hasLoginAndHasMallInfo() {
      return this.$store.getters.hasLoginAndHasMallInfo
    }
  },
  onLoad(options) {
    const payInfo = JSON.parse(options.payInfo)
    this.payInfo = payInfo
  },

  methods: {
    inputPhone: function(e) {
      this.receiverPhone = e.detail.value
    },
    inputMemo: function(e) {
      var memo = e.detail.value
      this.memo = memo
      this.currentNoteLen = parseInt(memo.length)
    },
    givenConfirm: function() {
      var that = this
      if (!that.inputPhone) {
        util.Tips({ title: '需要填写手机号' })
        that.focusPhone = true
        return
      }
      if (that.payInfo.data.length === 0) {
        return
      }
      uni.showLoading({
        title: '转赠卡券...'
      })
      const tcftqno = that.payInfo.data.map(coupon => {
        return coupon.code
      }).join(',')
      couponGiven({
        cardNoOfTransferor: that.userInfo.cardNo, // 转赠的会员卡号
        givenCouponNumber: tcftqno, // 券号
        receiverPhone: that.receiverPhone // 接收人手机号码
      }).then(res => {
        console.info('转赠卡券:', res)
        uni.hideLoading()
        util.Open('提示', '转赠成功', function() {
          util.bak()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .couponGivetoConfirm {
    min-height: 100%;
    flex: 1;
    font-size: 32rpx;
    font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
    overflow: hidden;
  }

  .give_box {
    text-align: center;
    margin: 40rpx 0 80rpx 0;
  }

  .txt {
    font-family: Courier, Calibri, '黑体';
    font-size: 38rpx;
    letter-spacing: 2rpx;
  }

  .money {
    font-weight: 600;
    font-size: 54rpx;
    letter-spacing: 2rpx;
    color: #f9be52;
    line-height: 70rpx;
  }

  .txt_bold {
    font-family: Courier, Calibri, '黑体';
    font-weight: 600;
    font-size: 42rpx;
    letter-spacing: 2rpx;
    text {
      color: #f9be52;
    }
  }

  .giveInfo {
    margin: 0 40rpx;
  }

  .giveInfo .title {
    font-family: Courier, Calibri, '黑体';
    font-weight: 600;
    font-size: 32rpx;
    letter-spacing: 2rpx;
  }

  .phone {
    border-bottom: 2rpx solid #d5d5d5;
    font-family: Courier, Calibri, '黑体';
    font-weight: 500;
    font-size: 32rpx;
    height: 100rpx;
    letter-spacing: 4rpx;
  }
  .memo-box {
    position: relative;
  }
  .memo {
    border-bottom: 2rpx solid #d5d5d5;
    font-family: Courier, Calibri, '黑体';
    font-size: 32rpx;
    height: 200rpx;
    letter-spacing: 4rpx;
    padding-top: 20rpx;
    width: 100%;
  }
  .memo-tip {
    position: absolute;
    font-size: 24rpx;
    color: #999999;
    right: 0;
    bottom: 0;
  }
  .page-body-button {
    margin-top: 60rpx;
    margin-bottom: 60rpx;
    border-radius: 40rpx;
    color: #f9be52;
    background-color: #2b2b2b;
    border-color: white;
    width: 80%;
  }

  .instruction {
    padding: 0 40rpx;
  }

  .instruction .explain {
    font-size: 32rpx;
    font-family: Courier, Calibri, '黑体';
    font-weight: 600;
    letter-spacing: 2rpx;
  }

  .instruction text {
    opacity: 0.5;
    font-size: 22rpx;
    font-family: Courier, Calibri, '黑体';
    font-weight: 500;
    text-align: left;
    color: #000000;
  }
</style>
